<template>
  <div class="com_container">
    <div class="com_chart" ref="ref_hot"></div>
  </div>
</template>

<script>
import chalk from '../../public/static/theme/chalk'

export default {
  data() {
    return {
      echartInstance: null,
      allData: [],
      titleSize: 0
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
    this.startIterval()
  },
  destroyed() {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    async initChart() {
      this.$echarts.registerTheme('chalk', chalk) // 注册主题
      this.echartInstance = this.$echarts.init(this.$refs.ref_hot, 'chalk')

      const initOption = {}
      this.echartInstance.setOption(initOption)
    },
    async getData() {
      const { data: res } = await this.$http.get('rank')
      console.log(res)
      this.allData = res

      this.upData()
    },
    upData() {
      const dataOption = {}
      this.echartInstance.setOption(dataOption)
    },
    screenAdapter() {
      this.titleSize = (this.$refs.ref_hot.offsetWidth / 100) * 3.6
      const screenOption = {
        title: {
          textStyle: {
            fontSize: this.titleSize
          }
        },
        series: {
          // 柱形宽度
          barWidth: this.titleSize,
          itemStyle: {
            // 圆角
            barBorderRadius: [this.titleSize / 2, this.titleSize / 2, 0, 0]
          }
        }
      }
      this.echartInstance.setOption(screenOption)
      this.echartInstance.resize()
    },
    // 定时器调节区域缩放
    startIterval() {
      setInterval(() => {
        this.startValue++
        this.endValue++
        if (this.endValue > this.allData.length - 1) {
          this.startValue = 0
          this.endValue = 9
        }
        this.upData()
      }, 2000)
    }
  }
}
</script>

<style lang="scss" scoped></style>
